<template>
	<view class="my">
		<view class="header">
			<view class="setting" @click="router('/pages/login/setting')">
				<image src="@/static/images/11.png"></image>
			</view>
			<!-- <view class="setting" @click="outLogin">
				<image src="@/static/images/11.png"></image>
			</view> -->
			<view class="avatar">
				<image :src="user_info.head_portrait"></image>
				<!-- <view class="label">
					<image src="@/static/images/10.png"></image>
					<text>已认证</text>
				</view> -->
			</view>
			<view class="name">{{user_info.nickname}}</view>
		</view>
		<view class="overview">
			<view class="property" @click="password=!password">
				<view class="property_text">
					<text>{{$t('my.资产总览')}}</text>
					<image src="@/static/images/12.png" v-if="password"></image>
					<image src="@/static/images/13.png" v-else></image>
				</view>
				<view class="property_label" @click="router('/pages/my/log')">{{$t('my.日志明细')}}</view>
			</view>
			<view class="view" v-if="password">
				<text class="value">***</text>
			</view>
			<view class="view" v-else>
				<text class="unit">$</text>
				<text class="value">{{user_info.balance}}</text>
			</view>
		</view>
		<view class="link">
			<view class="item" @click="router('/pages/my/recharge')">
				<image src="@/static/images/m1.png"></image>
				<view>{{$t('my.充值')}}</view>
			</view>
			<view class="item" @click="router('/pages/my/extract')">
				<image src="@/static/images/m2.png"></image>
				<view>{{$t('my.提现')}}</view>
			</view>
			<view class="item" @click="router('/pages/my/invitation')">
				<image src="@/static/images/m3.png"></image>
				<view>{{$t('my.邀请好友')}}</view>
			</view>
			<view class="item" @click="router('/pages/my/order')">
				<image src="@/static/images/m4.png"></image>
				<view>{{$t('my.订单')}}</view>
			</view>
		</view>
		<view class="tabs">
			<view class="item" :class="active==1?'active':''" @click="changeActive(1)">
				{{$t('my.藏品')}}({{data_info.product_total}})
			</view>
			<view class="item" :class="active==2?'active':''" @click="changeActive(2)">
				{{$t('my.盲盒')}}({{data_info.blindbox_total}})
			</view>
			<view class="item" :class="active==3?'active':''" @click="changeActive(3)">
				{{$t('my.交割')}}({{data_info.delivery_total}})
			</view>
			<view class="item" :class="active==4?'active':''" @click="changeActive(4)">{{$t('my.出售列表')}}</view>
		</view>
		<component ref="componentRef" :is="currentComponent" :type="active" @success="success" />
	</view>
</template>

<script setup>
	import {
		userInfo,
		userProduct
	} from "@/request/api";
	import List from "@/components/my/List.vue";
	import SellList from "@/components/my/SellList.vue";
	import {
		onShow,
		onHide,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		shallowRef
	} from "vue";
	import useStore from "@/stores/index.js";
	const {
		useUserStore,
		useLoginStore
	} = useStore();
	import useBase from "@/hooks/useBase.js";
	const {
		router
	} = useBase();
	const password = ref(true);

	const user_info = ref({});
	const data_info = ref({});
	onShow(async () => {
		let {
			user,
			share_url
		} = await userInfo();
		useUserStore.changeUserInfo(user);
		user_info.value = user;
		uni.setStorageSync('share_url', share_url);
	});
	onHide(() => active.value = 1);

	const active = ref(1);

	const currentComponent = shallowRef(List);
	const changeActive = (value) => {
		active.value = value;
		if (value == 4) {
			currentComponent.value = SellList;
		} else {
			currentComponent.value = List;
		}
	};
	const success = res => data_info.value = res;

	const componentRef = shallowRef();
	onReachBottom(() => {
		if (active.value == 3) {
			componentRef.value.loadmore();
		}
	});

	const outLogin = () => useLoginStore.outLogin();
</script>

<style scoped lang="scss">
	.my {
		padding: 30rpx;
		box-sizing: border-box;

		.header {
			width: 100%;
			position: relative;

			.avatar {
				width: 180rpx;
				margin: 0 auto;
				position: relative;

				&>image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 16rpx;
				}

				.label {
					width: 128rpx;
					height: 44rpx;
					border-radius: 10rpx;
					background: linear-gradient(0deg, #DDF247, #89E0AE);
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					bottom: 0;
					right: -67rpx;

					image {
						width: 32rpx;
						height: 32rpx;
					}

					text {
						color: #111111;
						font-size: 22rpx;
					}
				}
			}

			.setting {
				position: absolute;
				right: 30rpx;
				top: 0;

				image {
					width: 50rpx;
					height: 50rpx;
					z-index: 2;
				}
			}

			.name {
				text-align: center;
				color: #FFFFFF;
				font-size: 40rpx;
				font-family: DINPro;
				font-weight: bold;
				padding: 30rpx 0;
				box-sizing: border-box;
			}
		}

		.overview {
			height: 190rpx;
			border-radius: 20rpx;
			padding: 30rpx 35rpx;
			box-sizing: border-box;
			background: #2F2F2F;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.property {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.property_text {
					display: flex;
					align-items: center;

					text {
						color: #808080;
						font-size: 26rpx;
						font-weight: bold;
						padding-right: 10rpx;
						box-sizing: border-box;
					}

					image {
						width: 36rpx;
						height: 36rpx;
					}
				}

				.property_label {
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					color: #DDF247;
					font-size: 24rpx;
					border-radius: 6rpx;
					padding: 0 12rpx;
					box-sizing: border-box;
					background: rgba(221, 242, 71, 0.3);
				}
			}

			.view {
				.unit {
					color: #FFFFFF;
					font-size: 30rpx;
					font-weight: bold;
				}

				.value {
					color: #FFFFFF;
					font-size: 60rpx;
					font-family: DINPro;
					font-weight: bold;
					padding-left: 18rpx;
					box-sizing: border-box;
				}
			}
		}

		.link {
			width: 100%;
			border-radius: 20rpx;
			margin-top: 20rpx;
			padding: 30rpx 48rpx;
			box-sizing: border-box;
			background: #2F2F2F;
			display: flex;
			justify-content: space-between;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				view {
					color: #FFFFFF;
					font-size: 24rpx;
					text-align: center;
				}
			}
		}

		.tabs {
			padding: 40rpx 0 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.item {
				width: 160rpx;
				// height: 54rpx;
				// line-height: 54rpx;
				text-align: center;
				color: #808080;
				font-size: 28rpx;
				border-radius: 10rpx;
				background: #202020;
				display: flex;
				justify-content: center;
				align-items: center;

				&.active {
					color: #111111;
					background: #DDF247;
				}
			}
		}
	}
</style>